<template>
    <div class="loginContainer">
        <h1 class="loginTitle">百货中心供应系统</h1>
        <a-form
                :model="loginUser"
                name="basic"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                autocomplete="off"
                >
            <a-form-item
                    label="账 号"
                    name="usercode"
                    :rules="[{ required: true, message: '请输入账号!' }]"
            >
                <a-input v-model:value="loginUser.usercode"/>
            </a-form-item>

            <a-form-item
                    label="密 码"
                    name="password"
                    :rules="[{ required: true, message: '请输入密码!' }]"
            >
                <a-input-password v-model:value="loginUser.password"/>
            </a-form-item>

            <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                <a-checkbox v-model:checked="remember">自动登录</a-checkbox>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" @click="login">登 录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import {ref} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue'
    import {useRouter} from "vue-router"
    import {SessionStorage} from '../../public/session-storage.js'

    export default {
        name: "Login",
        setup() {
            const loginUser = ref({})
            const remember = ref(false)
            const router = useRouter()
            const login = () =>{
                console.log("登录信息",loginUser)
                let params = new URLSearchParams();
                params.append('usercode',loginUser.value.usercode)
                params.append('password',loginUser.value.password)
                axios.post('/login',params).then(rs=>{
                    console.log("登录结果",rs)
                    if (rs.data.code == 200){
                        console.log("loginUser",rs.data.data)
                        message.success("登陆成功")
                        SessionStorage.set("loginUser",rs.data.data)
                        router.push('/home')
                    }else {
                        message.error(rs.data.message)
                    }
                })
            }
            return {
                loginUser,
                remember,
                login
            }
        }
    }
</script>

<style scoped>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 188px auto;
        width: 450px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 0px auto 20px auto;
        text-align: center;
    }

</style>